<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>vue+element表格增删改查2版</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .card {
      width: 80%;
      height: 90vh;
      margin: 0 auto;
      overflow: auto;
    }
  </style>
</head>

<body>

  <div id="root" v-on:keyup.enter="onSearch">
    <el-card class="card" v-loading='loading'>
      <el-row style="margin: 10px 0;display: flex;align-items: center;">
        <span>搜索：</span>
        <el-input placeholder="请输入搜索内容（主标题）" v-model="search" style="width: 300px;margin: 0 10px;">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" @click="onSearch">点击查询</el-button>
        <el-button type="info" @click="showAllData">显示全部</el-button>
      </el-row>
      <el-table :data="dataList" style="width: 100%" border show-summary :summary-method="getSummaries">
        <el-table-column prop="id" label="ID" width="100">
        </el-table-column>
        <el-table-column prop="title" label="主标题">
        </el-table-column>
        <el-table-column prop="price" label="起步价格">
        </el-table-column>
        <el-table-column prop="edit" label="操作" width="100" align="center">
          <template slot-scope="{ $index }">
            <el-popconfirm title="确定删除当前数据？" @confirm="del($index)">
              <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>


  <script>

    /** 
     * 1. 搜索套餐功能
     * 2. 显示所有套餐
     * 3. 删除某一个套餐
     */

    const vm = new Vue({
      el: '#root',
      data() {
        return {
          search: '',
          loading: false,
          dataListCopy: [],
          dataList: [
            { id: '1', title: '肯德基疯狂炸鸡套餐1', price: 99.00 },
            { id: '2', title: '肯德基疯狂蛋糕套餐1', price: 99.00 },
            { id: '3', title: '肯德基疯狂冰淇淋套餐1', price: 99.00 },
            { id: '4', title: '肯德基疯狂炸鸡套餐2', price: 99.00 },
            { id: '5', title: '肯德基疯狂蛋糕套餐2', price: 99.00 },
            { id: '6', title: '肯德基疯狂冰淇淋套餐2', price: 99.00 },
          ]
        }
      },
      created() {
        this.dataListCopy = this.dataList
      },
      methods: {
        del(index) {
          this.dataList.splice(index, 1)
          this.$message.success('删除成功')
        },
        onSearch() {
          if (this.search.trim().length === 0) {
            this.showAllData()
            return
          }
          this.loading = true
          const array = []
          this.dataListCopy.forEach(item => {
            const bool = item.title.includes(this.search)
            if (bool) {
              array.push(item)
            }
          })
          this.dataList = array
          this.loading = false
        },
        showAllData() {
          this.loading = true
          setTimeout(() => {
            this.dataList = this.dataListCopy
            this.search = ''
            this.loading = false
          }, 1000)
        },
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总价为：';
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = 'N/A';
            }
          });
          return sums;
        }
      }
    })


  </script>
</body>

</html>